<template>
    <footer class="footer">
        <div class="footer-main">
            <div class="w1200">
                <div class="footer-content">
                    <!-- 公司信息 -->
                    <div class="footer-column company-info">
                        <div class="logo">
                            <img src="https://image.lutongjiakao.com/system/327a0884732e409a93261d79eaf3bae1.png"
                                class="logo-img" />
                        </div>
                        <div class="company-description">
                            <p>
                                武汉绿通云网络科技有限公司专注于驾培行业的信息化平台建设和软件服务，为驾培企业提供安全、可靠、易用的信息化管理平台以及优质专业的服务，公司凭借先进的科学管理理念和多年积累的行业经验针对不同管理模式的
                                驾培企业，提供一站式应用解决方案
                            </p>
                        </div>
                    </div>
                    <!-- 产品服务 -->
                    <div class="footer-column product-services">
                        <div class="footer-title">产品服务</div>
                        <ul class="footer-list">
                            <li v-for="(value, index) in servicesTypeList" :key="index" @click="toLink(value)">
                                {{ value.name }}
                            </li>
                        </ul>
                    </div>
                    <!-- 联系我们/行业资讯 -->
                    <div class="footer-column contact-industry">
                        <div class="footer-contact-industry">
                            <div class="contact-us">
                                <div class="footer-title">联系我们</div>
                                <div class="contact-text">
                                    134-7688-3427
                                </div>
                                <div class="contact-time">
                                    周一至周日 9:00-21:00
                                </div>
                                <div class="contact-info">
                                    <div class="contact-qrcode">
                                        <img src="https://image.lutongjiakao.com/system/063c103947d541a3ae92a4b8f892c52f.jpg"
                                            alt="官方微信" />
                                    </div>
                                    <div class="contact-desc">
                                        关注官方微信公众号
                                    </div>
                                </div>
                            </div>
                            <div class="industry-news">
                                <div class="footer-title">新闻动态</div>
                                <ul class="footer-list">
                                    <li v-for="(item, index) in userStore.newList" :key="index"
                                        @click="toNewsInfo(item.id)">
                                        <span>{{ item.publishTime.slice(5, 10) }}</span>
                                        {{ item.title }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="filing">
            <div class="w1200">
                <div class="filing-font">
                    <span>友情链接：</span>
                    <a href="https://hb.122.gov.cn/" target="_blank" rel="noopener">
                        交通管理部
                    </a>
                    <a href="https://www.cctaw.cn/" target="_blank" rel="noopener">
                        中国交通运输协会
                    </a>
                </div>
                <div class="line"></div>
                <div class="footer-font flex flex-justify-between flex-align-center">
                    <div class="flex flex-align-center">
                        <p>
                            Copyright © 2015-2025 武汉绿通云网络科技有限公司 All Rights Reserved. 鄂ICP备2025107354号-1
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const router = useRouter()
const servicesTypeList = ref([
    { name: '解决方案', link: '/private' },
    { name: '产品定价', link: '/projectPrice' },
    { name: '合作代理', link: '/cooperateAgent' },
    { name: '客户案例', link: '/customerCase' },
    { name: '新闻动态', link: '/news' },
    { name: '帮助中心' },
    { name: '下载中心', link: '/download' },
    { name: '关于我们', link: '/aboutUs' }
])

const toLink = (item: any) => {
    if (item.link) {
        router.push({ path: item.link })
    } else {
        window.open('https://www.yuque.com/lutongyun')
    }
}

const toNewsInfo = (id: string) => {
    router.push({
        name: 'newsInfo',
        query: { id }
    })
}
</script>

<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(910);
    margin: 0 auto;
}

.footer {
    background: #161e30;
}

.footer-main {
    padding: rem(40) 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr .5fr 2fr;
    gap: rem(40);
}

.footer-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

// 左侧：公司介绍
.company-info {
    .logo {
        width: rem(160);
        height: rem(50);

        .logo-img {
            width: 100%;
            height: 100%;
        }
    }

    .brand-text {
        margin-top: rem(8);

        .brand-name {
            font-size: rem(20);
            font-weight: 700;
            color: #1f2533;
            margin: 0 0 rem(2) 0;
            line-height: 1.1;
        }

        .brand-slogan {
            font-size: rem(12);
            color: #888;
            margin: 0;
            line-height: 1.2;
        }
    }

    .company-description {
        margin-bottom: rem(20);
        margin-top: rem(20);

        p {
            font-size: rem(10);
            color: rgba(255, 255, 255, .6);
            line-height: 1.6;
            margin: 0;
            max-width: rem(220);
        }
    }

    .social-links {
        display: flex;
        align-items: center;
        margin-top: rem(10);

        .social-title {
            font-size: rem(10);
            color: rgba(255, 255, 255, .6);
            margin-right: rem(10);
        }

        .social-icons {
            display: flex;
            gap: rem(10);
            position: relative;

            .social-icon {
                width: rem(24);
                height: rem(24);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: rem(12);
                color: #999;
                cursor: pointer;
                transition: all 0.3s ease;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                position: relative;
            }
        }
    }
}

// 中间：产品服务
.product-services {
    .footer-title {
        font-size: rem(12);
        font-weight: 700;
        color: #fff;
        margin-bottom: rem(10);
        letter-spacing: 0.02em;
    }

    .footer-list {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            font-size: rem(10);
            color: rgba(255, 255, 255, .6);
            margin-bottom: rem(8);
            white-space: nowrap;
            transition: color 0.2s;
            cursor: pointer;

            &:hover {
                color: rgb(17, 200, 113);
            }
        }
    }
}

// 右侧：联系我们/行业资讯
.contact-industry {
    .footer-contact-industry {
        display: flex;
        flex-direction: row;
        gap: rem(30);
    }

    .contact-us {
        width: rem(150);

        .footer-title {
            font-size: rem(12);
            font-weight: 700;
            color: #fff;
            margin-bottom: rem(10);
            letter-spacing: 0.02em;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: rem(10);

            .contact-qrcode {
                width: rem(90);
                height: rem(90);
                margin-top: rem(10);

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: rem(4);
                    border: 1px solid #eee;
                }
            }


        }

        .contact-text {
            font-size: rem(20);
            color: rgba(255, 255, 255);
            line-height: 1.5;
        }

        .contact-time {
            font-size: rem(10);
            margin: rem(2) 0 0;
            color: rgba(255, 255, 255, .6);
        }

        .contact-desc {
            font-size: rem(10);
            color: rgba(255, 255, 255, .6);
        }
    }

    .industry-news {
        flex: 1;

        .footer-title {
            font-size: rem(12);
            font-weight: 700;
            color: #fff;
            margin-bottom: rem(10);
            letter-spacing: 0.02em;
        }

        .footer-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: rem(10);
            height: 100%;

            li {
                font-size: rem(10);
                color: rgba(255, 255, 255, .6);
                /* margin-bottom: rem(6);  移除底部间距以便高度均分 */
                line-height: 1.5;
                white-space: normal;
                cursor: pointer;

                &:hover {
                    color: rgb(17, 200, 113);
                }

                span {
                    margin-right: rem(5);
                }
            }
        }
    }
}

.filing {
    background: #161e30;
    padding: rem(20) 0 rem(50) 0;
}

.filing-font {
    display: flex;
    gap: rem(10);
    font-size: rem(11);
    color: rgba(255, 255, 255, .6);

    a {
        color: rgba(255, 255, 255, .6);
        text-decoration: none;
        transition: color 0.2s;
    }

    a:hover {
        color: rgb(17, 200, 113);
    }
}

.marT20 {
    margin-top: rem(20);
}

.line {
    height: 1px;
    background-color: rgba(255, 255, 255, .6);
    margin: rem(20) 0;
}

.footer-font {
    font-size: rem(11);
    color: rgba(255, 255, 255, .6);
}
</style>